<template>
    <div style="margin-top: 75px;">
        <div id="thisYear" style="width: 100%;height:400px;"></div>
        <h3>今年目前销售 <h1><div v-text="totalSale"></div></h1></h3>
        <HR align=center  width=72% color=#black SIZE=1 />
        <h3>其他年份的销售统计</h3>
        <div id="otherYear" style="width: 100%;height:400px; margin-top: 75px;"></div>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                totalSale:'',
            }
        },
        mounted() {
            this.$http.get(this.$route.meta['url'])
                .then(form => {
                    if (form.data.status == "0") {
                        let data = form.data;
                        let thisYear = this.$echarts.init(document.getElementById('thisYear'));
                        let otherYear = this.$echarts.init(document.getElementById('otherYear'));
                        // 指定图表的配置项和数据
                        let datum = data['series'];
                        this.totalSale=String(datum[datum.length-1].data.reduce((a,b)=>a + b))+"辆";
                        console.log(datum[datum.length-1]);
                        let option = {
                            "title": {"text": "今年全国各月销售统计（单位：辆）"},
                            "tooltip": {},
                            "series": datum[datum.length - 1],
                            "xAxis": {"data": ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"]},
                            "yAxis": {},
                        };
                        thisYear.setOption(option);
                        option['series'] = datum.slice(0,datum.length-1);
                        let legendData = [...datum].map(e => e.name);
                        option['legend'] = {data: legendData.slice(0,legendData.length-1)};
                        option['title']['text'] = null;
                        otherYear.setOption(option);
                        window.addEventListener('resize', function () {
                            thisYear.resize()
                        });
                    } else {
                        this.$message("数据有误，请等待管理员处理")
                    }
                })
        },
        methods: {
        },
        watch: {},
        created() {

        },
    }
</script>

<style scoped>

</style>